<script setup>
import { ref } from 'vue';

	let isShowFlag=ref(true)
</script>


<template>
	<div class="codeAlerBox" v-if="isShowFlag">
		<div class="codeAlert-closeButton"
		@click="isShowFlag=false"
		>
			<div class="closeButton-icon">
				<img src="@/assets/images/home-Images/Group 28@2x.png" alt="" />
			</div>
		</div>
		<div class="codeAlerBox-mainBox">
			<div class="mainBox-title">
				<p>
					扫码下载APP探索更多商品
				</p>
				<p>
					15分钟酒速达
				</p>
			</div>
			<div class="mainBox-codeImageBox">
				<img src="@/assets/images/qrcode.jpg" alt="" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.codeAlerBox{
		position: fixed;
		right: 27px;
		width: 293px;
		height: 385px;
		top: calc((100% - 293px) / 2);
		background: #C30D23;
		border-radius: 0px 0px 0px 0px;
		z-index:999;
		box-sizing: border-box;
		padding: 15px;
		
		.codeAlert-closeButton{
			width: 51px;
			height: 51px;
			position: absolute;
			right: -25px;
			top: -25px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.codeAlerBox-mainBox{
			.mainBox-title{
				padding: 6px 0 0 0;
				text-align: center;
				margin-bottom: 27px;
				p{
					font-family: Lexend, Lexend;
					font-weight: 500;
					font-size: 19px;
					color: #FFFFFF;
					line-height: 28px;
				}
			}
			.mainBox-codeImageBox{
				width: 267px;
				height: 267px;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.detail-imagesAlert{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.60);
		}
	}
</style>